<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<view class="pages-publi-box" :style="'background:#FFFFFF;'">
			<view class="text-title fontw500 font34" :style="'border-color:#EBEBEB;color:#111111;'">
				加粉类型
			</view>
			<view class="text-title font30" :style="'border-color:#EBEBEB;color:#111111;'" @click="changeItemIndex(1)">
				<text>微信号</text>
				<image v-if="diversion_type == 1" src="../../../static/active-success.png" mode=""></image>
			</view>
			<view class="text-title font30" :style="'border-color:#EBEBEB;color:#111111;'" @click="changeItemIndex(2)">
				<text>公众号</text>
				<image v-if="diversion_type == 2" src="../../../static/active-success.png" mode=""></image>
			</view>
			<view class="text-title font30" :style="'border-color:#EBEBEB;color:#111111;'" @click="changeItemIndex(3)">
				<text>小程序</text>
				<image v-if="diversion_type == 3" src="../../../static/active-success.png" mode=""></image>
			</view>
			<view class="text-title font30" :style="'border-color:#EBEBEB;color:#111111;'" @click="changeItemIndex(4)">
				<text>微信群</text>
				<image v-if="diversion_type == 4" src="../../../static/active-success.png" mode=""></image>
			</view>
		</view>
		<view class="pages-publi-box1" :style="'background:#FFFFFF;'">
			<text class="font34 fontw500" :style="'color:#111111;'">名称显示</text>
			<input :style="'background:#f7f7f7'" class="name-input" type="text" v-model="diversion_name" placeholder="请输入发起人名称" />
		</view>
		<block v-if="diversion_type!=3">
			<view class="pages-publi-box1" :style="'background:#FFFFFF;'">
				<text class="font34 fontw500" :style="'color:#111111;'">加粉二维码</text>
				<view class="qr-image" :style="'background:#f7f7f7'" @click="uploadImage">
					<image class="qr-iamge-abgimg" :src="top_image" mode="aspectFit"></image>
					<view class="add-qr-image" v-if="top_image==''">
						<text class="font28" :style="'color:#FFFFFF;'">＋上传二维码图片</text>
					</view>
				</view>
			</view>
		</block>
		<block v-if="diversion_type == 3">
			<view class="pages-publi-box1" :style="'background:#FFFFFF;'">
				<text class="font34 fontw500" :style="'color:#111111;'">引流方式</text>
				<view class="drainage-list">
					<view class="item1" @click="chagneDrainageId(0)" :style="{'border-color':(mini_tab_index == 0?'#E9564F;':'#AEAEAE;'),background:(mini_tab_index == 0?'#FEECEC;':'#FFFFFF;')}">
						<text class="font28" :style="{color:(mini_tab_index == 0?'#E9564F;':'#AEAEAE;')}">快捷跳转</text>
					</view>
					<view class="item1" @click="chagneDrainageId(1)" :style="{'border-color':(mini_tab_index == 1?'#E9564F;':'#AEAEAE;'),background:(mini_tab_index == 1?'#FEECEC;':'#FFFFFF;')}">
						<text class="font28" :style="{color:(mini_tab_index == 1?'#E9564F;':'#AEAEAE;')}">二维码识别</text>
					</view>
				</view>
				<block v-if="mini_tab_index == 0">
					<text class="font30" :style="'color:#111111;'">小程序AppID</text>
					<input :style="'background:#f7f7f7'" class="name-input" type="text" v-model="diversion_appid" placeholder="点击输入小程序AppID" />
					<text class="font30" :style="'margin-top:30rpx;color:#111111;'">小程序路径</text>
					<input :style="'background:#f7f7f7'" class="name-input" type="text" v-model="diversion_path" placeholder="点击输入小程序路径" />	
				</block>
				<view class="qr-image" @click="uploadImage" :style="'background:#f7f7f7'" v-if="mini_tab_index == 1">
					<image class="qr-iamge-abgimg" :src="top_image" mode="aspectFit"></image>
					<view class="add-qr-image" v-if="top_image ==''">
						<text class="font28" :style="'color:#FFFFFF;'">＋上传二维码图片</text>
					</view>
				</view>
			</view>
		</block>
		
		<block v-if="diversion_type == 1">
			<view class="bottom-item-index" :style="'background:#FFFFFF;'">
				<image class="bottom-wx-icon" src="../../../static/wxicon.png" mode=""></image>
				<view class="btn-item-index" :style="'background:#50B674;'">
					<image src="../../../static/add-friends.png" mode=""></image>
					<text class="font24" :style="'color:#FFFFFF;'">加好友</text>
				</view>
			</view>
		</block>
		<block v-if="diversion_type == 2">
			<view class="bottom-item-index" :style="'background:#FFFFFF;'">
				<image class="bottom-wx-icon" src="../../../static/xiaochengxu.png" mode=""></image>
				<view class="btn-item-index" :style="'background:#605AB0;'">
					<image src="../../../static/add-friends.png" mode=""></image>
					<text class="font24" :style="'color:#FFFFFF;'">去体验</text>
				</view>
			</view>
		</block>
		<block v-if="diversion_type == 3">
			<view class="bottom-item-index" :style="'background:#FFFFFF;'">
				<image class="bottom-wx-icon" src="../../../static/xiaochengxu.png" mode=""></image>
				<view class="btn-item-index" :style="'background:#0189F3;'">
					<image src="../../../static/gongzhognhao.png" mode=""></image>
					<text class="font24" :style="'color:#FFFFFF;'">去了解</text>
				</view>
			</view>
		</block>
		<block v-if="diversion_type == 4">
			<view class="bottom-item-index" :style="'background:#FFFFFF;'">
				<image class="bottom-wx-icon" src="../../../static/wxicon.png" mode=""></image>
				<view class="btn-item-index" :style="'background:#50B674;'">
					<image src="../../../static/add-friends.png" mode=""></image>
					<text class="font24" :style="'color:#FFFFFF;'">去加群</text>
				</view>
			</view>
		</block>
		<view class="bottom-btn" :style="'background:#E9564F'" @click="saveDiversion">
			<text :style="'color:#FFFFFF;'">提交</text>
		</view>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				config_data:[],
				item_index:1,
				show_name:'',
				mini_tab_index:0,
				diversion_type:1,//引流类型(1微信号 2公众号 3小程序 4微信群)
				diversion_name:'',//引流名称
				diversion_image:'',//引流图片
				diversion_appid:'',//引流小程序Appid 当diversion_type=3时可以传这个
				diversion_path:'',//引流小程序路径 当diversion_type=3时可以传这个
				top_image:''
			};
		},
		onShow() {
			
		},
		onHide() {
			this.item_index = 1
			console.log(this.item_index)
		},
		onUnload() {
			this.item_index = 1
			console.log(this.item_index)
		},
		onLoad(e) {
			if(e.index == 0){
				this.diversion_type = 1
			}else{
				this.diversion_type = e.index
			}
			console.log(this.diversion_type)
			this.config_data = this.$store.state.diversion
			if(this.config_data.diversion_type){
				this.diversion_type = this.config_data.diversion_type
				this.diversion_name = this.config_data.diversion_name
				this.diversion_image = this.config_data.diversion_image
				this.diversion_appid = this.config_data.diversion_appid
				this.diversion_path = this.config_data.diversion_path
				this.top_image = this.config_data.top_image
			}
			console.log(this.config_data)
		},
		methods:{
			saveDiversion(){
				let data = {
					diversion_type:this.diversion_type,
					diversion_name:this.diversion_name,//引流名称
					diversion_image:this.diversion_image,//引流图片
					diversion_appid:this.diversion_appid,//引流小程序Appid 当diversion_type=3时可以传这个
					diversion_path:this.diversion_path,//引流小程序路径 当diversion_type=3时可以传这个
					top_image :this.top_image
				}
				this.$store.commit("saveDiversion",data)
				console.log(data)
				uni.navigateBack({
					
				})
			},
			chagneDrainageId(id){
				this.mini_tab_index = id
			},
			uploadImage(){
				let _self = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						console.log("123",res.tempFilePaths)
						_self.top_image = res.tempFilePaths[0]
						uni.showLoading({
							mask:true
						})
						uni.uploadFile({
							url: util.getUrl("common/upload"), //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								name: res.tempFilePaths[0]
							},
							header: {
								'content-type': 'multipart/form-data',
								'Authori-zation':uni.getStorageSync("token")
							},
							success: (uploadFileRes) => {
								let linshi = JSON.parse(uploadFileRes.data)
								_self.diversion_image = linshi.data
								console.log(_self.diversion_image,"diversion_image")
								uni.hideLoading()
							},
							fail: (err) => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: err,
									duration: 5000
								})
							}
						});
				    }
				});
			},
			changeItemIndex(index){
				this.diversion_type = index
				this.item_index = index
			},
		}
	}
</script>

<style lang="scss">
	.drainage-list{
		display: flex;
		align-items: center;
		margin-bottom: 30upx;
		margin-top: 30upx;
		.item1{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 190upx;
			height: 60upx;
			margin-right: 10upx;
			border-radius: 8upx;
			border: 2upx solid;
		}
	}
	.bottom-btn{
		width: 690upx;
		height: 80upx;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34upx;
	}
	.bottom-item-index{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690upx;
		box-sizing: border-box;
		padding: 27upx 30upx;
		border-radius: 20upx;
		margin-bottom: 30upx;
		
		.bottom-wx-icon{
			width: 40upx;
			height: 40upx;
		}
		.btn-item-index{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 131upx;
			height: 40upx;
			border-radius: 4upx;
			image{
				width: 28upx;
				height: 24upx;
				margin-right: 10upx;
			}
		}
	}
	.qr-image{
		width: 630upx;
		height: 278upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 8upx;
		margin-top: 30upx;
		.qr-iamge-abgimg{
			width: 100%;
			height:100%;
		}
		.add-qr-image{
			width: 260upx;
			height: 48upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background:rgba(0,0,0,0.5);
			position: absolute;
			z-index: 3;
		}
	}
	.name-input{
		width: 630upx;
		height: 80upx;
		margin-top: 30upx;
		border-radius: 8upx;
		box-sizing: border-box;
		padding-left: 30upx;
	}
	.text-title{
		width: 100%;
		box-sizing: border-box;
		padding: 30upx 0;
		border-bottom: 2upx solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 32upx;
			height: 27upx;
		}
	}
	.pages-publi-box{
		width: 690upx;
		display: flex;
		flex-direction: column;
		padding: 0 30upx;
		box-sizing: border-box;
		border-radius: 20upx;
		margin-bottom: 30upx;
	}
	.pages-publi-box1{
		width: 690upx;
		display: flex;
		flex-direction: column;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx;
		margin-bottom: 30upx;
	}
	.content{
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		align-items: center;
		width: 750upx;
		background: #F7F7F7;
		font-family: PingFang SC;
		box-sizing: border-box;
		padding: 30upx;
	}
</style>
